<template>

    <!--<vue-table :data-source="tableList" :search-config="searchConfig" @open-complex="openComplex"-->
    <!--@on-query="changeQuery">-->
    <!--<template slot="search" slot-scope="props">-->
    <!--<i-form :label-width="80">-->
    <!--<Row>-->
    <!--<i-col span="24">-->
    <!--<Form-item label="姓名">-->
    <!--<i-input v-model="props.name" placeholder="请输入姓名"></i-input>-->
    <!--</Form-item>-->
    <!--</i-col>-->
    <!--</Row>-->
    <!--</i-form>-->
    <!--</template>-->
    <!--<template slot="header">-->
    <!--<tr>-->
    <!--<th>调解员</th>-->
    <!--<th>案件类型</th>-->
    <!--<th>完成数量</th>-->
    <!--<th>完成质量</th>-->
    <!--&lt;!&ndash;<th>操作</th>&ndash;&gt;-->
    <!--</tr>-->
    <!--</template>-->
    <!--<template slot="tbody" slot-scope="props">-->
    <!--<tr>-->
    <!--<td>{{props.item.username}}</td>-->
    <!--<td>{{typeList[props.item.case_type]}}</td>-->
    <!--<td>{{props.item.case_num}}</td>-->
    <!--<td>{{lists[props.item.case_quality-1]}}</td>-->
    <!--&lt;!&ndash;<td>&ndash;&gt;-->
    <!--&lt;!&ndash;<Tooltip content="编辑"  placement="top">&ndash;&gt;-->
    <!--&lt;!&ndash;<i-button type="text" v-on:click="showEditDialog(props.item.id)"&ndash;&gt;-->
    <!--&lt;!&ndash;:disabled="stateManager.buttonLoading">&ndash;&gt;-->
    <!--&lt;!&ndash;<Icon type="edit" size="16"></Icon>&ndash;&gt;-->
    <!--&lt;!&ndash;</i-button>&ndash;&gt;-->
    <!--&lt;!&ndash;</Tooltip>&ndash;&gt;-->
    <!--&lt;!&ndash;<Tooltip content="删除"  placement="top">&ndash;&gt;-->
    <!--&lt;!&ndash;<i-button type="text" v-on:click="deleteModel(props.item.id, props.item.case_type)"&ndash;&gt;-->
    <!--&lt;!&ndash;:disabled="stateManager.buttonLoading">&ndash;&gt;-->
    <!--&lt;!&ndash;<Icon type="trash-a" size="16"></Icon>&ndash;&gt;-->
    <!--&lt;!&ndash;</i-button>&ndash;&gt;-->
    <!--&lt;!&ndash;</Tooltip>&ndash;&gt;-->
    <!--&lt;!&ndash;</td>&ndash;&gt;-->
    <!--</tr>-->
    <!--</template>-->
    <div>
        <div style="width:calc(100% - 10px);height:400px;margin-top: 50px" id="home_page_map"></div>
    </div>

</template>

<script>
  import { mapState } from 'vuex'
  import selectData from '../../libs/getDataForSelect'
  import echarts from 'echarts'

  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data: function () {
      return {
        list: this.$listDataSource({
          url: '/api/case-statistics'
        }),
        searchConfig: {
          items: {
            name: '',
          },
          complex: false,
          status: false
        },
        typeList: [
          '婚姻家庭类',
          '生产经营类',
          '财产类',
          '侵权类',
          '劳动争议类',
          '社会管理类',
        ],
        lists: [
          '差', '一般', '较好', '很好',
        ],
        openComplexStatus: false,
        model: this.$modelDataSource({
          url: '/api/case-statistics',
          dataKey: 'model',
          attributes: {
            id: 0,
            name: '',
          }
        }),
        tableList: {},
        query: {}
      }
    },
    methods: {
      openComplex: function (openStatus) {
        this.openComplexStatus = openStatus
      },
      changeQuery: function (query) {
        this.query = query
        this.stateManager.refreshList = true
      },
      getChart: function () {
        this.$nextTick(() => {
          let visiteVolume = echarts.init(document.getElementById('home_page_map'))
          let xAxisData = []
          let data1 = []
          let data2 = []
          let data3 = []
          let data4 = []
          let data5 = []
          let data6 = []
          for (let i = 0; i < this.tableList.length; i++) {
            xAxisData[this.tableList[i].users_id] = this.tableList[i].username
            switch (this.tableList[i].case_type) {
              case '0' :
                data1[this.tableList[i].users_id] = this.tableList[i].case_num
                break
              case '1' :
                data2[this.tableList[i].users_id] = this.tableList[i].case_num
                break
              case '2' :
                data3[this.tableList[i].users_id] = this.tableList[i].case_num
                break
              case '3' :
                data4[this.tableList[i].users_id] = this.tableList[i].case_num
                break
              case '4' :
                data5[this.tableList[i].users_id] = this.tableList[i].case_num
                break
              case '5' :
                data6[this.tableList[i].users_id] = this.tableList[i].case_num
                break
            }
          }
          let user = []
          let n1 = []
          let n2 = []
          let n3 = []
          let n4 = []
          let n5 = []
          let n6 = []
          for (let k = 0; k < xAxisData.length; k++) {
            if (xAxisData[k]) {
              user.push(xAxisData[k])
              n1.push(data1[k] ? data1[k] : 0)
              n2.push(data2[k] ? data2[k] : 0)
              n3.push(data3[k] ? data3[k] : 0)
              n4.push(data4[k] ? data4[k] : 0)
              n5.push(data5[k] ? data5[k] : 0)
              n6.push(data6[k] ? data6[k] : 0)
            }
          }
          const option = {
            color: [
              '#003366',
              '#006699',
              '#4cabce',
              '#4cb344',
              '#aab544',
              '#bd2344'
            ],
            legend: {
              data: this.typeList
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              // top: '10%',
              left: '2%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',

              data: user,
              axisTick: {show: false},
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                name: '婚姻家庭类',
                type: 'bar',
                barGap: 0,
                data: n1
              },
              {
                name: '生产经营类',
                type: 'bar',
                data: n2
              },
              {
                name: '财产类',
                type: 'bar',
                data: n3
              },
              {
                name: '侵权类',
                type: 'bar',
                data: n4
              },
              {
                name: '劳动争议类',
                type: 'bar',
                data: n5
              },
              {
                name: '社会管理类',
                type: 'bar',
                data: n6
              },
            ]
          }

          visiteVolume.setOption(option)

          window.addEventListener('resize', function () {
            visiteVolume.resize()
          })
        })

      }

    },
    mounted: function () {
      axios.get('/api/case-statistics').then((res) => {
        this.tableList = res.data.data
        this.stateManager.refreshList = false
        this.getChart()
      })
    },
    computed: {
      ...mapState({
        user: 'user',
      }),
      // tableList () {
      //   let self = this
      //   if (this.stateManager.refreshList) {
      //     this.list.fetch(self.query, function () {
      //       self.stateManager.refreshList = false
      //     })
      //   }
      //   this.getChart()
      //   return this.list
      // }
    }
  }
</script>
